<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>公募基金</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<style>
		.filter ul li{
			width: 33.33%;
		}
	</style>
</head>
<body>
	<div id="container" style="padding-bottom:50px;padding-top:10px;">
		<!-- 搜索 -->
		<div class="search-wrap">
			<input class="search-top" :class="{active:inputFocus}" v-model="inputValue" type="search" @keyup.enter="searchList">
			<p :class="{active:inputFocus}"><span class="iconfont">&#xe601;</span>{{inputText}}</p>
			<button type="button" v-if="inputFocus" @click="searchCancel">取消</button>
			<div class="search-bac" v-if="inputFocus">
				<div class="history-list-wrap">
					<p><span class="iconfont">&#xe627;</span>历史搜索</p>
					<ul>
						<li class="history-list" v-for="item in historyList">
							<i  @click="hisSearch(item.keywords)">{{item.keywords}}</i><span class="iconfont" @click="delKeyWords(item.idStr)">&#xe624;</span>
						</li>
					</ul>
					<a v-if="historyList.length>0" @click="delAllKeyWords">清空搜索记录</a>
				</div>
			</div>
		</div>
		<!--产品列表-->
		<my-top></my-top>
		<!--筛选条件-->
		<div class="filter" :class="{active:showFilter}">
			<ul class="clear-fix">
				<li @click="filterAll":class="{active:!netValue}">全部</li>
				<li @click="NetValueSort" :class="{active:netValue}">净值<span class="iconfont">&#xe61a</span></li>
				<li @click="filterFuc">类别<span class="iconfont">&#xe61b</span></li>
			</ul>
		</div>
		<div class="filter-area" >
			<dl style="border:none">
				<dd class="clear-fix">
					<span
						v-for="(i,index) in filter"
						v-bind:title="i.val"
						v-bind:class="{active:i.active}"
						v-on:click="filterBtn(index,i.val)">
						{{i.text}}
					</span>
				</dd>
			</dl>
		</div>
		<!--列表-->
		<div class="pro-public refresh">
			<div class="pro-public-list" v-for="v in proList">
				<div v-if="v.fundType === 'MONETARY_FUND'">
					<a v-bind:href="'product_3_detail_1.html?idStr=' + v.product.idStr">
						<div class="pro-public-list-title">
							<b>{{v.product.name}}</b>
						</div>
						<div class="pro-public-list-con">
							<ul class="clear-fix">
								<li class="pro-public-main">
									<span>{{v.copiesBenefit | formatNum('','%')}}</span>
									<i>每万份收益</i>
								</li>
								<li class="pro-public-vice">
									<span>{{v.avgApr | formatNum('+','%')}}</span>
									<i>七日年化收益率</i>
								</li>
							</ul>
						</div>
						<div class="pro-public-list-bottom">
							<ul class="clear-fix">
								<li>
									<span>基金类型</span>
									<i>{{v.fundType | fundType}}</i>
								</li>
								<!--<li>-->
									<!--<span>最新净值</span>-->
									<!--<i>{{v.todayNetvalue }}</i>-->
								<!--</li>-->
							</ul>
						</div>
					</a>
				</div>
				<div v-else>
					<a v-bind:href="'product_3_detail.html?idStr=' + v.product.idStr">
						<div class="pro-public-list-title">
							<b>{{v.product.name}}</b>
						</div>
						<div class="pro-public-list-con">
							<ul class="clear-fix">
								<li class="pro-public-main">
									<!--<span v-if="v.nearThreeMonthApr == 0">&#45;&#45;</span>-->
									<span v-if="!v.nearThreeMonthApr">--</span>
									<span v-else>{{v.nearThreeMonthApr  | formatNum('','%')}}</span>
									<i>近3个月收益</i>
								</li>
								<li class="pro-public-vice">
									<span v-if="!v.nearYearApr">--</span>
									<span v-else>{{v.nearYearApr | formatNum('','%')}}</span>
									<i>近一年收益</i>
								</li>
							</ul>
						</div>
						<div class="pro-public-list-bottom">
							<ul class="clear-fix">
								<li>
									<span>基金类型</span>
									<i>{{v.fundType | fundType}}</i>
								</li>
								<li>
									<span>最新净值</span>
									<i v-if="v.todayNetvalue == '0'">--</i>
									<i v-else>{{v.todayNetvalue }}</i>
								</li>
							</ul>
						</div>
					</a>
				</div>
			</div>
		</div>
		<!--底栏-->
		<my-footer></my-footer>
		<div class="empetDate">
 			<span class="iconfont">&#xe602;</span>
 			抱歉！没找到更多数据
 		</div>
	</div>
<script src="../../build/public/vue.js" charset="utf-8"></script>
<script src="../../build/public/base.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script src="../../build/js/jquery.min.js"></script>
<script src="../../build/js/template.js"></script>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>

<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		filter:[
				{val:'',text:'全部',active:true},
				{val:'EQUITY_FUND',text:'股票型',active:false},
				{val:'BOND_FUND',text:'债券型',active:false},
				{val:'COMMINGLED_FUND',text:'混合型',active:false},
				{val:'MONETARY_FUND',text:'货币型',active:false},
				{val:'EXPONENT',text:'指数型',active:false},
				{val:'QDII',text:'QDII',active:false},
				{val:'ETF',text:'ETF',active:false},
				{val:'LOF',text:'LOF',active:false},
				{val:'STRUCTURED_FUND',text:'分级基金',active:false},
				{val:'COMBINATION',text:'组合',active:false}
		],
		proList:[],
		page:1,
		fundType:'',
		netValue:false,
		fundSort:'',
		showFilter:false,
		inputText:'大家都在搜：银行理财',
		inputValue:'',
		inputFocus:false,
		historyList:[],
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.getListData();
			vm.init();
			refresh(this.refreshData());    //监听滚动到底部->触发refreshData()
		})
	},
	methods:{
		//获取列表数据
		getListData:function(callback){										//获取列表数据
			loader.init();
			get("/product/publicFund/fund-list",{
				currentPage:vm.page,													//页码
				fundType:vm.fundType,													//公募基金类型
				fundSort:vm.fundSort, 												//净值
			},function(res){
				vm.proList = vm.proList.concat(res.data.resultList);  //数据合并渲染
				if(res.data.resultList.length == 0){
					refreshText('到底了哦！')
				}else{
					refreshText('上拉加载更多数据')
				}
				if(vm.proList.length == 0){
					document.querySelector('.empetDate').style.display = 'block';
					refreshText('')
				}else{
					document.querySelector('.empetDate').style.display = 'none';
				}
				if(vm.proList.length <5){
					refreshText('')
				}
				loader.remove();

			})
		},
		refreshData:function(){
			return function(){
					vm.page++;
					vm.getListData();
			}
		},
		//筛选显示隐藏
		filterFuc:function(){
			var filterArea = document.querySelector('.filter-area');
			if(filterArea.classList.contains('active')){
				filterArea.classList.remove('active');
				filterArea.style.height = 0;
				this.showFilter = false;
				this.mask(-1);
			}else {
				filterArea.classList.add('active');
				filterArea.style.height = filterArea.scrollHeight + 'px';
				this.showFilter = true;
				this.mask(1);
				this.closeMask();
			}
		},
		//确定筛选
		filterBtn:function(index,type){
			for(i in this.filter){
				this.filter[i].active = false;
			}
			this.filter[index].active = !this.filter[index].active;
			vm.fundType = type;
			vm.page = 1;
			vm.proList = [];
			vm.getListData();
			this.filterFuc();
		},
		//筛选->全部
		filterAll:function(){
			vm.netValue = false;
			vm.fundSort = '';
			vm.fundType = '';
			vm.page = 1;
			vm.proList = [];
			vm.getListData();
		},
		//净值排序
		NetValueSort:function(){
			vm.netValue = true;
			vm.proList = [];
			var list = document.querySelectorAll('.filter li');
			if(vm.fundSort == 'NET_VALUE_DESC'){
				vm.fundSort = 'NET_VALUE_ASC';
				list[1].classList.add('asc');
			}else{
				vm.fundSort = 'NET_VALUE_DESC';
				list[1].classList.remove('asc');
			}
			vm.getListData();
		},
		//点击蒙版关闭筛选
		closeMask:function(){
			var filterArea = document.querySelector('.filter-area');
			var mask = document.querySelector('.mask');
			mask.addEventListener('click',function(){
				document.body.removeChild(mask);
				filterArea.classList.remove('active');
				filterArea.style.height = 0;
				vm.showFilter = false;
			})
		},
		//搜索监听
		init:function(){
			var searchWrap = document.querySelector('.search-wrap');
			var searchInput = document.querySelector('.search-top');
			var footer = document.querySelector('.footer')
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
				vm.showKeyWords();
				footer.style.display = 'none';
				searchWrap.style.cssText = 'position:fixed;top:10px;'
			}
			searchInput.onblur = function(){

			}
		},
		//取消搜索
		searchCancel:function(){
			var footer = document.querySelector('.footer');
			var searchWrap = document.querySelector('.search-wrap');
			vm.inputFocus = false;
			vm.inputText = '大家都在搜：银行理财';
			vm.inputValue = '';
			footer.style.display = 'block';
			searchWrap.style.cssText = 'position:relative;'
		},
		//请求搜索关键字
		showKeyWords:function(){
			noParamsGet('/advisor/home/keywords-history',function(res){
				vm.historyList = res.data.slice(0,10);
			})
		},
		//删除搜索历史单个关键字
		delKeyWords:function(idStr){
			post('/advisor/home/keywords-history/remove',{
				keywordsHistoryIdStr:idStr
			},function(res){
				vm.showKeyWords();
				toast('已删除')
			})
		},
		//清除搜索历史
		delAllKeyWords:function(){
			noParamsPost('/advisor/home/keywords-history/clear',function(res){
				vm.showKeyWords();
				toast('已清空')
			})
		},
		//触发请求
		searchList:function(){
			console.log(vm.inputValue);
			if(vm.inputValue == ''){
				toast('请输入搜索条件');
				return
			}
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		},
		//点击搜索历史触发搜索请求
		hisSearch:function(keywords){
			vm.inputValue = keywords;
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		}
	}
})
</script>

</body>
</html>
